<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 表格</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 15px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        caption {
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 1.1em;
        }
        .highlight-col {
            background-color: #f2f2f2;
        }
        .highlight-col2 {
            background-color: #e6e6e6;
        }
    </style>
</head>
<body>
    <nav>
        <a href="html5-basic-structure.html">基础结构</a>
        <a href="html5-text-tags.html">文本标签</a>
        <a href="html5-links-images.html">链接和图像</a>
        <a href="html5-lists.html">列表</a>
        <a href="html5-tables.html">表格</a>
        <a href="html5-forms.html">表单</a>
        <a href="html5-semantic-tags.html">语义化标签</a>
        <a href="html5-multimedia.html">多媒体标签</a>
    </nav>

    <h1>HTML5 表格</h1>
    
    <section>
        <h2>基本表格结构</h2>
        <div class="example">
            <h3>示例：</h3>
            <div class="code">
                &lt;table&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;caption&gt;员工信息表&lt;/caption&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;姓名&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;部门&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;薪资&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/thead&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;张三&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;市场部&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;5000&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;李四&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;技术部&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;6000&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tbody&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tfoot&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td colspan="2"&gt;平均薪资&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;5500&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tfoot&gt;<br>
                &lt;/table&gt;
            </div>
            
            <div class="preview">
                <table>
                    <caption>员工信息表</caption>
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>部门</th>
                            <th>薪资</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td>市场部</td>
                            <td>5000</td>
                        </tr>
                        <tr>
                            <td>李四</td>
                            <td>技术部</td>
                            <td>6000</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="2">平均薪资</td>
                            <td>5500</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            
            <h3>表格结构说明：</h3>
            <ul>
                <li><strong>&lt;table&gt;</strong> - 定义表格</li>
                <li><strong>&lt;caption&gt;</strong> - 为表格提供标题</li>
                <li><strong>&lt;thead&gt;</strong> - 定义表格的头部</li>
                <li><strong>&lt;tbody&gt;</strong> - 定义表格的主体</li>
                <li><strong>&lt;tfoot&gt;</strong> - 定义表格的页脚</li>
                <li><strong>&lt;tr&gt;</strong> - 定义表格行</li>
                <li><strong>&lt;th&gt;</strong> - 定义表头单元格</li>
                <li><strong>&lt;td&gt;</strong> - 定义数据单元格</li>
            </ul>
        </div>
        
        <div class="note">
            <p><strong>注意：</strong> 虽然 &lt;thead&gt;, &lt;tbody&gt;, 和 &lt;tfoot&gt; 标签是可选的，但它们有助于表格的结构化和样式设置。特别是在处理大型表格时，这些标签可以提高可读性和可维护性。</p>
        </div>
    </section>
    
    <section>
        <h2>单元格合并</h2>
        <div class="example">
            <h3>行合并（rowspan）</h3>
            <div class="code">
                &lt;table border="1"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td rowspan="2"&gt;合并行&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;行 1，列 2&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;行 2，列 2&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &lt;/table&gt;
            </div>
            
            <div class="preview">
                <table>
                    <tr>
                        <td rowspan="2" style="vertical-align: middle;">合并行</td>
                        <td>行 1，列 2</td>
                    </tr>
                    <tr>
                        <td>行 2，列 2</td>
                    </tr>
                </table>
            </div>
        </div>
        
        <div class="example">
            <h3>列合并（colspan）</h3>
            <div class="code">
                &lt;table border="1"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;行 1，列 1&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;行 1，列 2&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td colspan="2"&gt;合并列&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &lt;/table&gt;
            </div>
            
            <div class="preview">
                <table>
                    <tr>
                        <td>行 1，列 1</td>
                        <td>行 1，列 2</td>
                    </tr>
                    <tr>
                        <td colspan="2">合并列</td>
                    </tr>
                </table>
            </div>
        </div>
        
        <div class="example">
            <h3>复杂的单元格合并</h3>
            <div class="code">
                &lt;table border="1"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th rowspan="2" colspan="2"&gt;产品&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th colspan="2"&gt;销售情况&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;数量&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;金额&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td rowspan="2"&gt;水果&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;苹果&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;10&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;100&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;香蕉&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;8&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;80&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &lt;/table&gt;
            </div>
            
            <div class="preview">
                <table>
                    <tr>
                        <th rowspan="2" colspan="2" style="vertical-align: middle;">产品</th>
                        <th colspan="2">销售情况</th>
                    </tr>
                    <tr>
                        <th>数量</th>
                        <th>金额</th>
                    </tr>
                    <tr>
                        <td rowspan="2" style="vertical-align: middle;">水果</td>
                        <td>苹果</td>
                        <td>10</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>香蕉</td>
                        <td>8</td>
                        <td>80</td>
                    </tr>
                </table>
            </div>
        </div>
        
        <div class="note">
            <p><strong>使用说明：</strong></p>
            <ul>
                <li><strong>rowspan</strong> - 指定单元格应该跨越的行数</li>
                <li><strong>colspan</strong> - 指定单元格应该跨越的列数</li>
                <li>合并单元格时，需要删除被合并的单元格，否则会导致表格布局错误</li>
                <li>合理使用单元格合并可以创建更复杂和信息丰富的表格布局</li>
            </ul>
        </div>
    </section>
    
    <section>
        <h2>表格分组</h2>
        <div class="example">
            <h3>使用 colgroup 和 col</h3>
            <div class="code">
                &lt;table&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;colgroup&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;col style="background-color: #f2f2f2;"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;col span="2" style="background-color: #e6e6e6;"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/colgroup&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;产品&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;数量&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;价格&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;苹果&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;5&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;10&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;香蕉&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;3&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;8&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &lt;/table&gt;
            </div>
            
            <div class="preview">
                <table>
                    <colgroup>
                        <col class="highlight-col">
                        <col class="highlight-col2" span="2">
                    </colgroup>
                    <tr>
                        <th>产品</th>
                        <th>数量</th>
                        <th>价格</th>
                    </tr>
                    <tr>
                        <td>苹果</td>
                        <td>5</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>香蕉</td>
                        <td>3</td>
                        <td>8</td>
                    </tr>
                </table>
            </div>
            
            <h3>使用说明：</h3>
            <ul>
                <li><strong>&lt;colgroup&gt;</strong> - 用于对表格中的列进行分组，以便应用样式</li>
                <li><strong>&lt;col&gt;</strong> - 定义表格列的属性
                    <ul>
                        <li><strong>span</strong> 属性指定 col 元素应该跨越的列数</li>
                        <li>可以使用 style 属性为列应用样式</li>
                    </ul>
                </li>
                <li>colgroup 必须出现在 caption 之后，thead、tbody、tfoot 和 tr 之前</li>
                <li>使用 colgroup 可以更容易地为整列应用样式，而不必为每个单元格单独设置</li>
            </ul>
        </div>
    </section>
    
    <section>
        <h2>表格的可访问性</h2>
        <div class="example">
            <h3>使用 scope 属性</h3>
            <div class="code">
                &lt;table&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope="col"&gt;姓名&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope="col"&gt;年龄&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope="col"&gt;职业&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope="row"&gt;张三&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;25&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;工程师&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th scope="row"&gt;李四&lt;/th&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;30&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;设计师&lt;/td&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br>
                &lt;/table&gt;
            </div>
            
            <div class="preview">
                <table>
                    <tr>
                        <th scope="col">姓名</th>
                        <th scope="col">年龄</th>
                        <th scope="col">职业</th>
                    </tr>
                    <tr>
                        <th scope="row">张三</th>
                        <td>25</td>
                        <td>工程师</td>
                    </tr>
                    <tr>
                        <th scope="row">李四</th>
                        <td>30</td>
                        <td>设计师</td>
                    </tr>
                </table>
            </div>
            
            <h3>使用说明：</h3>
            <ul>
                <li><strong>scope</strong> 属性用于指定表头单元格是列头还是行头
                    <ul>
                        <li><code>col</code> - 表示列头</li>
                        <li><code>row</code> - 表示行头</li>
                        <li><code>colgroup</code> - 表示列组头</li>
                        <li><code>rowgroup</code> - 表示行组头</li>
                    </ul>
                </li>
                <li>使用 scope 属性可以提高表格的可访问性，特别是对于使用屏幕阅读器的用户</li>
            </ul>
        </div>
    </section>
    
    <section>
        <h2>表格的最佳实践</h2>
        <ul>
            <li>使用语义化的表格结构（thead, tbody, tfoot）</li>
            <li>为表格提供清晰的标题（caption）</li>
            <li>使用适当的表头（th）和数据单元格（td）</li>
            <li>为表头添加 scope 属性，提高可访问性</li>
            <li>避免使用表格进行页面布局，表格应该只用于表格数据</li>
            <li>保持表格结构简单，避免过度复杂的单元格合并</li>
            <li>使用 CSS 控制表格样式，而不是使用过时的 HTML 属性</li>
            <li>考虑为大型表格添加斑马条纹（zebra striping）以提高可读性</li>
            <li>确保表格在不同屏幕尺寸上的响应式显示</li>
        </ul>
    </section>
    
    <footer>
        <p>&copy; 2023 HTML5 学习指南。保留所有权利。</p>
    </footer>
</body>
</html>